<template>
	<sw-common-frame :loading="loading">
<<<<<<< HEAD
		<el-button slot="button" size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
		<el-form slot="query" size="small" inline>
			<el-form-item>
				<el-input v-model="queryData.name" clearable placeholder="角色名称" style="width: 180px"></el-input>
			</el-form-item>
			<el-form-item>
				<el-select v-model="queryData.type" clearable placeholder="角色类型" style="width: 100px">
					<el-option v-for="(item, index) in dictData['ROLE_TYPE']" :key="index" :label="item.msg" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="queryTableData()">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table slot="table" size="medium" :data="tableData" stripe height="100%">
			<el-table-column type="index" label="序号" align="center" width="48"></el-table-column>
			<el-table-column prop="name" label="角色名称" min-width="200" show-overflow-tooltip></el-table-column>
			<el-table-column prop="content" label="角色描述" min-width="200" show-overflow-tooltip></el-table-column>
			<el-table-column label="角色类型" min-width="138" :formatter="roleTypeFormatter"></el-table-column>
			<el-table-column prop="createName" label="创建人" min-width="120"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" min-width="160"></el-table-column>
			<el-table-column label="操作" width="230">
				<template slot-scope="{ row }">
					<el-button size="medium" type="text" @click="handleConfigMenu(row)">配置菜单</el-button>
					<el-button size="medium" type="text" @click="handleSelectUser(row)">选择人员</el-button>
					<el-button size="medium" type="text" @click="handleOpenDialog(row.id)">修改</el-button>
					<el-button size="medium" type="text" @click="handleDeleteData(row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<sw-pagination slot="page" :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()" />
=======
		<template slot="button">
			<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
		</template>
		<template slot="query">
			<el-form size="small" inline>
				<el-form-item>
					<el-input v-model="queryData.name" clearable placeholder="角色名称" style="width: 180px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-select v-model="queryData.type" clearable placeholder="角色类型" style="width: 100px">
						<el-option v-for="(item, index) in dictData['ROLE_TYPE']" :key="index" :label="item.msg" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="queryTableData()">查询</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="table">
			<el-table size="medium" :data="tableData" stripe height="100%">
				<el-table-column type="index" label="序号" align="center" width="48"></el-table-column>
				<el-table-column prop="name" label="角色名称" min-width="200" show-overflow-tooltip></el-table-column>
				<el-table-column prop="content" label="角色描述" min-width="200" show-overflow-tooltip></el-table-column>
				<el-table-column label="角色类型" min-width="138" :formatter="roleTypeFormatter"></el-table-column>
				<el-table-column prop="createName" label="创建人" min-width="120"></el-table-column>
				<el-table-column prop="createTime" label="创建时间" min-width="160"></el-table-column>
				<el-table-column label="操作" width="230">
					<template slot-scope="{ row }">
						<el-button size="medium" type="text" @click="handleConfigMenu(row)">配置菜单</el-button>
						<el-button size="medium" type="text" @click="handleSelectUser(row)">选择人员</el-button>
						<el-button size="medium" type="text" @click="handleOpenDialog(row.id)">修改</el-button>
						<el-button size="medium" type="text" @click="handleDeleteData(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<template slot="page">
			<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()"></sw-pagination>
		</template>
>>>>>>> a39ec491040245f3d304f11a3fac437b9f5ff440
		<form-dialog v-model="formDialog" :data-id="dataId" @refresh="queryTableData()"></form-dialog>
		<select-user v-model="userDialog" :data="selectUsers" @submit="handleSubmitSelect"></select-user>
		<config-menu v-model="menuDrawer" :data-id="dataId"></config-menu>
	</sw-common-frame>
</template>

<script>
import formDialog from './form';
import configMenu from './configMenu';
import listMixins from '@/mixins/listMixins';
import selectUser from '@/components/selectUser';
import { userDetail } from '@/api/system/tbSysUser';
import { getRoleList, deleteRole } from '@/api/system/tbSysRole';
import { getUserByRole, addUsersByRole } from '@/api/system/tbSysUserRole';
export default {
	mixins: [listMixins],
	enums: ['ROLE_TYPE'],
	components: { formDialog, selectUser, configMenu },
	data() {
		return {
			pageName: '角色',
			menuDrawer: false,
			userDialog: false,
			selectUsers: [],
			submitLoading: false
		};
	},
	computed: {
		listFunction() {
			return eval(getRoleList);
		},
		deleteFunction() {
			return eval(deleteRole);
		}
	},
	methods: {
		//获取用户详情
		async getUserDetail(id) {
			let result = await userDetail(id).then((res) => res.data);
			if (result.code === '0') {
				let datas = this.$detailData(result.data);
				return Promise.resolve(datas);
			} else {
				return {};
			}
		},

		//获取用户头像
		getUserAvatars(arr) {
			let promiseArr = arr.map((item) => {
				if (!item.userName) {
					let obj = { id: item.userId, userName: item.userId };
					return Promise.resolve(obj);
				} else {
					return this.getUserDetail(item.userId);
				}
			});
			return Promise.all(promiseArr);
		},

		//配置菜单
		handleConfigMenu(row) {
			this.dataId = row.id;
			this.menuDrawer = true;
		},

		//选择用户
		async handleSelectUser(row) {
			let result = await getUserByRole(row.id).then((res) => res.data);
			if (result.code === '0') {
				let dataArr = result.data || [];
				let userArrs = await this.getUserAvatars(dataArr);
				this.selectUsers = userArrs.map((item) => {
					let picPath = !!item.picId && item.picId !== '-1' ? item.picPath : undefined;
					return { relId: item.id, relName: item.userName, picPath };
				});
				this.userDialog = true;
			}
		},

		roleTypeFormatter(data) {
			let info = this.dictData['ROLE_TYPE'].find((n) => n.value === data.type);
			let tagType = (() => {
				if (data.type === '1') {
					return 'danger';
				} else if (data.type === '2') {
					return 'warning';
				} else if (data.type === '3') {
					return 'success';
				} else if (data.type === '4') {
					return 'info';
				}
			})();
			return this.$createElement('elTag', { attrs: { size: 'medium', type: tagType } }, info.msg || '未知');
		},

		formatConfigParams(arr) {
			let params = { roleId: this.dataId };
			params['userList'] = arr.map((item) => {
				let obj = { relId: item.relId };
				if (item.oper === 'add') {
					obj['operType'] = 1;
				} else if (item.oper === 'del') {
					obj['operType'] = 2;
				}
				return { ...obj };
			});
			this.submitLoading = true;
			return params;
		},

		async handleSubmitSelect(arr, list) {
			let params = this.formatConfigParams(arr);
			let result = await addUsersByRole(params).then((res) => res.data);
			this.submitLoading = false;
			if (result.code === '0') {
				this.$message.success('配置角色人员成功');
				this.userDialog = false;
			}
		}
	}
};
</script>

<style scoped></style>
